<template>
	<view style="background-color:#F5F5F8 ;height: 100vh;">
		<view>
			<map style="width: 750rpx;height: 340rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view style="height: 172rpx;width: 750rpx;background-color: #FFFFFF;">
			<view style="">
				<view style="float: left;width:560rpx">
					<view style="font-size: 40rpx;margin-left:40rpx ;margin-top: 34rpx;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{name}}</view>
					<view style="color: #666666;font-size: 32rpx;margin-left:40rpx ;margin-top: 10rpx;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{address}}</view>
				</view>	
				<view style="float: right;margin-right: 40rpx;width: 120rpx;">
					<view style="display: flex;flex-direction: row;justify-content: center;"><image src="../../static/coordinate.png" style="width: 52rpx;height: 76rpx;margin-top: 18rpx;"></image></view>
					<view style="font-size: 40rpx;color: #FB9A17;display: flex;flex-direction: row;justify-content: center;">{{distance}}km</view>
				</view>	
			</view>
		</view>
		<view style="height: 150rpx;width: 690rpx;margin-left: 30rpx;background-color: #FFFFFF;margin-top: 20rpx;display: flex;border-radius: 16rpx;">
			<view style="height: 94rpx;width: 160rpx;margin-left: 90rpx;margin-top: 28rpx;" @click="gotoDZG()">
				<view style="text-align: center;color: #E93B3D;font-size: 52rpx;line-height: 52rpx;">{{list.created}}</view>
				<view style="font-size: 32rpx;">待整改隐患</view>
			</view>
			<view style="height: 40rpx;width: 1rpx;background-color:#D8D8D8;margin: 54rpx auto;"></view>
			<view style="height: 94rpx;width: 160rpx;margin-right: 90rpx;margin-top: 28rpx;" @click="gotoYWC()">
				<view style="text-align: center;color: #60AD35;font-size: 52rpx;line-height: 52rpx;">{{list.finished}}</view>
				<view style="font-size: 32rpx;">已完成整改</view>
			</view>
		</view>
		<view style="height: 184rpx;width: 690rpx;margin-left: 30rpx;background-color:#FFFFFF;margin-top: 20rpx;border-radius: 16rpx;">	
			<view style="width: 630rpx;height: 90rpx;margin-left: 30rpx;border-bottom:2rpx solid #E5E5E5;" @click="gotoXG()">
				<image src="../../static/icon01.png" style="width: 60rpx;height: 60rpx;margin-top: 18rpx;float: left;"></image>
				<view style="font-size: 32rpx;margin-left: 10rpx;margin-top: 30rpx;line-height: 32rpx;float: left;">修改场所信息</view>
				<image src="../../static/iconjiantou@3x.png" style="width: 36rpx;height: 36rpx;margin-top: 30rpx;float: right;"></image>
			</view>
			<view style="width: 630rpx;height: 90rpx;margin-left: 30rpx;display: flex;" @click="gotoRD()">
				<image src="../../static/icon02.png" style="width: 60rpx;height: 60rpx;margin-top: 18rpx;"></image>
				<view style="font-size: 32rpx;margin-left: 10rpx;margin-top: 30rpx;line-height: 32rpx;">巡查记录</view>
				<view style="margin-left: auto;">
					<view style="color: #999999;font-size: 28rpx;margin-top: 28rpx;margin-right: 16rpx;float: left;">{{ans[0].checkTime}}</view>
					
					<image src="../../static/iconjiantou@3x.png" style="width: 36rpx;height: 36rpx;margin-top: 30rpx;float: right;"></image>
				</view>
			</view>
			
		</view>
		<view style="display: flex;position: fixed;bottom: 0rpx;height: 140rpx;background-color: #FFFFFF;width: 750rpx;border-bottom: 1rpx solid #E5E5E5;">
			<button style="color: #FFFFFF;font-size: 36rpx;background-color: #519AFF;border-radius: 47rpx;width: 330rpx;height: 90rpx;margin-top: 14rpx;" @click="gotoEX()">规范化建设</button>
			<button style="color: #FFFFFF;font-size: 36rpx;background-color: #519AFF;border-radius: 47rpx;width: 330rpx;height: 90rpx;margin-left: 30rpx;margin-top: 14rpx;" @click="gotoFW()">房屋安全排查</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title: 'map',
				latitude: '',
				longitude: '',
				name:'',
				address:'',
				id:'',
				answertime:'',
				Tok:'',
				lngs:'',
				lats:'',
				distance:'',
				ownerId:'',
				ans:[],
				covers: [{
					id:0,
					latitude:'29.86170429',
					longitude:'121.57025177',
					// iconPath:'../../static/coordinate.png',
					iconPath:'./../../static/coordinate@3x.png',
					width:28,
					height:40,
					anchor:{x: .5, y: .3},
					callout: {
						content: '',
						fontSize:16,
						padding:8,
						color:'#666666',
						borderRadius:8,
						display:'ALWAYS'
					} 
				}],
				list:{}
			}
		},
		
		methods:{
			gotoDH(){
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name:this.name,
					address:this.address,
					success: function () {
						console.log('success');
					}
				});
			},
			async getLocation(){
				
				uni.request({
					url:`https://project.develop.lanchengiot.cn/project_flood/v1/qr_code/flood/info`,
					header:{"Authorization" : this.Tok},
					data:{"id":this.id,"point":this.lngs+","+this.lats},
					method:'POST',
				}).then((res)=>{
					console.log(res[1].data,'222');
					this.name=res[1].data.data.name;
					this.address=res[1].data.data.address;
					this.distance=(res[1].data.data.distance/1000).toFixed(2);
					this.latitude=res[1].data.data.y;
					this.longitude=res[1].data.data.x;
					this.ownerId=res[1].data.data.ownerId;
					this.list=res[1].data.data;
					console.log(this.list);
					uni.setStorage({
						key:'ownerId',
						data:this.ownerId,
					})
					uni.setStorage({
						key:'id',
						data:this.id
					})
					// this.covers[0].latitude=this.latitude;
					// this.covers[0].longitude=this.longitude;
					// this.covers[0].callout.content=res[1].data.data.name;
					setTimeout(()=>{
						this.$set(this.covers[0],'latitude',this.latitude)
						this.$set(this.covers[0],'longitude',this.longitude)
						this.$set(this.covers[0].callout,'content',this.name)
					},100)
					
					
					
					console.log(this.covers[0],'this.covers[0]');
					
					// this.getMes();
				})
			},
			async getTok(){
				this.$myRequest({
					url:`/project_flood/v1/qr_code/reload/`+this.id
				}).then((res)=>{
					console.log(res);
					this.Tok=res.data.data.token;
					this.getLocation();
					uni.setStorage({
						key:'token',
						data:this.Tok,
					})
				})
			},
			async getAns(){
				this.$myRequest({
					url:'/project_flood/v1/check/anwser/flood/list_by_type',
					data:{'ownerId':this.ownerId,'type':1}
				}).then((res)=>{
					this.ans=res.data.data
				})
			},
			
			gotoDZG(){
				uni.navigateTo({
					url:`../yinhuan/DZGyinhuan?id=${this.ownerId}`
				})
			},
			gotoYWC(){
				uni.navigateTo({
					url:`../yinhuan/YWCzhengG?id=${this.ownerId}`
				})
			},
			gotoRD(){
				uni.navigateTo({
					url:`./record?name=${this.list.name}&address=${this.list.address}&corporation=${this.list.corporation}&corporationMobile=${this.list.corporationMobile}`
				})
			},
			gotoEX(){
				uni.navigateTo({
					url:`../FXducha/exercise`
				})
			},
			gotoFW(){
				uni.navigateTo({
					url:`../FXducha/exerFW`
				})
			},
			gotoXG(){
				uni.navigateTo({
					url:`revise?ownerId=${this.ownerId}`
				})
			}
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			this.getTok();
			this.getAns().then((res)=>{
				uni.hideLoading();
			})
		},
		onLoad(options) {
			console.log(options);
			this.id=options.id
			try {
			    const A = uni.getStorageSync('ownerId');
				const B = uni.getStorageSync('lng');
				const Y = uni.getStorageSync('lat');
				this.ownerId=A;
				this.lngs=B;
				this.lats=Y
			    if (A) {
			        console.log(A);
			    }
			} catch (e) {
				console.log(e);
			    // error
			};
		}
	}
</script>

<style>
</style>
